import { useEffect } from 'react';

export default function App() {
  useEffect(() => {
    console.log('content ui loaded');
  }, []);

  function handleClick() {
    // 处理点击事件的逻辑
    console.log(chrome);
    
    chrome.runtime.sendMessage({ action: 'openSidePanel' });
  }

  function handleKeyDown(event: KeyboardEvent) {
    if (event.key === 'Enter' || event.key === ' ') {
      handleClick();
    }
  }

  return (
    <div role="button" tabIndex={0}  className=" h-[100px] bg-white flex gap-1 text-blue-500 fixed top-0 z-40" onClick={handleClick} onKeyDown={handleKeyDown}>
      Edit <strong>pages/content-ui/src/app.tsx</strong> and save to reload.
    </div>
  );
}
